<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-30 08:08:11
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-01 22:07:24
 * @FilePath: \guanggu_traffic\src\views\admin\components\UserListDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-dialog
		draggable
		v-model="isShow"
		title="用户列表"
		width="800"
		overflow
		:close-on-click-modal="false"
	>
		<div class="dialogContent">
			<el-button
				size="small"
				type="primary"
				plain
				@click="handleTaggle('common')"
				>普通用户</el-button
			>
			<el-button
				size="small"
				type="primary"
				plain
				@click="handleTaggle('traffic')"
				>交通管理员</el-button
			>
			<el-button
				size="small"
				type="primary"
				plain
				@click="handleTaggle('admin')"
				>超级管理员</el-button
			>
			<!-- 模糊查询 -->
			<el-input
				v-model.lazy="searchValue"
				@change="handleSearch"
				placeholder="请输入用户名"
				clearable
				style="margin: 0 40px; width: 200px"
			/>
			<!-- 刷新 -->
			<el-button plain @click="handkeRefresh">
				<i class="iconfont icon-shuaxin"></i
			></el-button>
			<!-- -->
			<el-button type="success" @click="isShowUserInfoDialog = true"  v-if="currentUserType !== 'common'"
				>新增</el-button
			>
		</div>
		<user-list-table :data="renderTableData" :syncUserData="syncUserData" />

		<template #footer>
			<!-- 分页器 -->
			<el-pagination
				size="small"
				background
				layout="prev, pager, next"
				:total="renderTableData.length"
				:page-size="limit"
				@current-change="handleCurrentChange"
			/>
			<div class="dialog-footer">
				<el-button @click="isShow = false">取消</el-button>
				<el-button type="primary" @click="isShow = false">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<user-info-dialog
		v-model="isShowUserInfoDialog"
		:isEdit="false"
		:handleSubmit="handleAddUser"
	/>
</template>

<script setup>
import { ref, computed } from 'vue'
import UserListTable from './UserListTable.vue'
import UserInfoDialog from './UserInfoDialog.vue'
import { getUserInfoHttp, registerHttp } from '@/request/request'
import { ElMessage } from 'element-plus'
let isShow = ref(false)
let isShowUserInfoDialog = ref(false) //是否展示用户信息弹窗
const allUserData = ref([]) //所有用户列表
const currentUserType = ref('common') //当前用户类型
const searchValue = ref('') //搜索关键字
const currentPage = ref(1) //当前页码
const limit = 6 //每页显示条数
//新增用户弹窗功能
const handleAddUser = async ({ username, password, type }) => {
	try {
		await registerHttp({ username, password, type })
		isShowUserInfoDialog.value = false
		ElMessage.success('新增用户成功')
	} catch (error) {
		console.log(error)
		ElMessage.error('新增用户失败,请检查用户名是否重复')
	}
}
//模糊查询
const handleSearch = (value) => {
	searchValue.value = value
}
//刷新模糊查询
const handkeRefresh = () => {
	searchValue.value = ''
}
const currentUserTypeLength = ref(0) //分页器长度  当前用户类型数量
//改变当前页码
const handleCurrentChange = (value) => {
	currentPage.value = value
}
//分页器
const renderTableData = computed(() => {
	let result = allUserData.value.filter((item) => {
		return item.type === currentUserType.value
	})
	//模糊搜索
	if (searchValue.value) {
		result = result.filter((item) =>
			item.username.includes(searchValue.value)
		)
	}
	//当前用户类型总数,用于分页更新
	currentUserTypeLength.value = result.length
	const start = (currentPage.value - 1) * limit
	const end = start + limit

	return result.slice(start, end)
})

//同步后台用户数据
const syncUserData = () => {
	allUserData.value = []
	getAllUserData('admin')
	getAllUserData('common')
	getAllUserData('traffic')
}
//请求Type类型数并更更新到allUserData中
const getAllUserData = (type) => {
	getUserInfoHttp(type).then((res) => {
		// console.log('object', res)
		const users = res.result.map((item) => {
			return {
				username: item.username,
				type: item.type,
				password: item.password,
				isOnline: item.isOnline,
			}
		})
		//拼接数据
		allUserData.value = allUserData.value.concat(users)
	})
}
//切换用户类型
const handleTaggle = (type) => {
	currentUserType.value = type
}
//打开弹窗同步后台数据
const handleOpen = () => {
	isShow.value = true
	//同步后台数据
	syncUserData()
}
//开启弹窗在父组件中使用打开
defineExpose({
	handleOpen,
})
</script>

<style lang="scss" scoped>
.menu {
	position: fixed;
	right: 0;
}
</style>
